<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慰风博客</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            min-height: 100vh;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .blog-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
        }
        .main-content {
            flex: 1;
        }
        .sidebar {
            width: 300px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .blog-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            text-decoration: none;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .article-card {
            margin-bottom: 20px;
            transition: all 0.3s ease;
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }
        .article-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .article-cover {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .article-content {
            padding: 20px;
        }
        .article-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
            text-decoration: none;
        }
        .article-title:hover {
            color: #409EFF;
        }
        .article-summary {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        .article-meta {
            color: #999;
            font-size: 14px;
            display: flex;
            gap: 20px;
        }
        .pagination-container {
            margin-top: 30px;
            display: flex;
            justify-content: center;
        }
        .sidebar-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .sidebar-title {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tag-item {
            padding: 5px 10px;
            background: #f0f2f5;
            border-radius: 4px;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .tag-item:hover {
            background: #409EFF;
            color: white;
        }
        .category-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .category-item {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .category-item:last-child {
            border-bottom: none;
        }
        .category-name {
            color: #666;
        }
        .category-count {
            background: #f0f2f5;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            color: #999;
        }
        .article-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .like-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            color: #909399;
            transition: all 0.3s;
        }
        
        .like-btn:hover {
            color: #409EFF;
        }
        
        .like-btn.liked {
            color: #F56C6C;
        }
        
        .like-btn i {
            font-size: 16px;
        }
        
        .like-btn span {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="blog-container">
            <div class="main-content">
                <div class="header">
                    <a href="/" class="blog-title">慰风博客</a>
                    <div class="user-info">
                        <template v-if="currentUser">
                            <span>欢迎，{{ currentUser.nickname }}</span>
                            <el-button type="text" @click="handleLogout">退出</el-button>
                        </template>
                        <template v-else>
                            <el-button type="text" @click="goToLogin">登录</el-button>
                        </template>
                    </div>
                </div>
                <div class="category-filter">
                    <el-radio-group v-model="currentCategory" @change="handleCategoryChange">
                        <el-radio-button :label="null">全部</el-radio-button>
                        <el-radio-button v-for="category in categories" :key="category.id" :label="category.id">
                            {{ category.name }}
                        </el-radio-button>
                    </el-radio-group>
                </div>
                <div v-loading="loading">
                    <div v-for="article in articles" :key="article.id" class="article-card">
                        <img v-if="article.coverImage" :src="article.coverImage" class="article-cover" :alt="article.title">
                        <div class="article-content">
                            <a :href="'/article.html?id=' + article.id" class="article-title">{{ article.title }}</a>
                            <div class="article-summary">{{ article.summary }}</div>
                            <div class="article-meta">
                                <span><i class="el-icon-view"></i> {{ article.viewCount || 0 }}</span>
                                <span><i class="el-icon-star-off"></i> {{ article.likeCount || 0 }}</span>
                                <span><i class="el-icon-time"></i> {{ formatDate(article.createTime) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        @current-change="handlePageChange"
                        :current-page="currentPage"
                        :page-size="pageSize"
                        :total="total"
                        layout="prev, pager, next">
                    </el-pagination>
                </div>
            </div>
            <div class="sidebar">
                <div class="sidebar-card">
                    <div class="sidebar-title">分类</div>
                    <ul class="category-list">
                        <li v-for="category in categories" :key="category.id" class="category-item">
                            <span class="category-name">{{ category.name }}</span>
                            <span class="category-count">{{ category.count }}</span>
                        </li>
                    </ul>
                </div>
                <div class="sidebar-card">
                    <div class="sidebar-title">标签云</div>
                    <div class="tag-cloud">
                        <span v-for="tag in tags" :key="tag.id" class="tag-item" @click="handleTagClick(tag)">
                            {{ tag.name }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    articles: [],
                    categories: [],
                    currentCategory: null,
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    loading: false,
                    currentUser: null,
                    tags: []
                }
            },
            created() {
                this.checkLogin();
                this.fetchArticles();
                this.fetchCategories();
                this.fetchTags();
            },
            methods: {
                async checkLogin() {
                    try {
                        const res = await axios.get('/api/users/current');
                        if (res.data.code === 200) {
                            this.currentUser = res.data.data;
                        } else {
                            this.currentUser = null;
                        }
                    } catch (error) {
                        this.currentUser = null;
                    }
                },
                async fetchArticles() {
                    this.loading = true;
                    try {
                        const params = {
                            current: this.currentPage,
                            size: this.pageSize
                        };
                        if (this.currentCategory) {
                            params.categoryId = this.currentCategory;
                        }
                        const res = await axios.get('/api/articles/list', { params });
                        if (res.data.code === 200) {
                            this.articles = res.data.data.records || [];
                            this.total = res.data.data.total || 0;
                        }
                    } catch (error) {
                        this.$message.error('加载文章列表失败');
                    } finally {
                        this.loading = false;
                    }
                },
                async loadArticleLikeInfo(article) {
                    if (!this.currentUser) return;
                    try {
                        const countRes = await axios.get(`/api/articles/${article.id}/like/count`);
                        if (countRes.data.code === 0) {
                            article.likeCount = countRes.data.data;
                        }
                        const statusRes = await axios.get(`/api/articles/${article.id}/like/status`, {
                            params: { userId: this.currentUser.id }
                        });
                        if (statusRes.data.code === 0) {
                            article.isLiked = statusRes.data.data;
                        }
                    } catch (error) {}
                },
                async toggleLike(article) {
                    if (!this.currentUser) {
                        this.$message.warning('请先登录');
                        return;
                    }
                    try {
                        if (article.isLiked) {
                            const res = await axios.delete(`/api/articles/${article.id}/like`, {
                                params: { userId: this.currentUser.id }
                            });
                            if (res.data.code === 0) {
                                article.isLiked = false;
                                article.likeCount--;
                                this.$message.success('取消点赞成功');
                            }
                        } else {
                            const res = await axios.post(`/api/articles/${article.id}/like`, null, {
                                params: { userId: this.currentUser.id }
                            });
                            if (res.data.code === 0) {
                                article.isLiked = true;
                                article.likeCount++;
                                this.$message.success('点赞成功');
                            }
                        }
                    } catch (error) {
                        this.$message.error('点赞操作失败');
                    }
                },
                async fetchCategories() {
                    try {
                        const res = await axios.get('/api/categories/list');
                        if (res.data.code === 200) {
                            this.categories = res.data.data.records;
                        }
                    } catch (error) {
                        this.$message.error('加载分类列表失败');
                    }
                },
                fetchTags() {
                    this.tags = [
                        { id: 1, name: 'Java' },
                        { id: 2, name: 'Spring Boot' },
                        { id: 3, name: 'Vue.js' },
                        { id: 4, name: 'MySQL' },
                        { id: 5, name: 'Redis' }
                    ];
                },
                handleCategoryChange(categoryId) {
                    this.currentCategory = categoryId;
                    this.currentPage = 1;
                    this.fetchArticles();
                },
                handlePageChange(page) {
                    this.currentPage = page;
                    this.fetchArticles();
                },
                handleTagClick(tag) {
                    // TODO: 实现标签点击事件
                },
                formatDate(dateStr) {
                    if (!dateStr) return '';
                    const date = new Date(dateStr);
                    return date.toLocaleDateString();
                },
                handleLogout() {
                    axios.post('/api/user/logout')
                        .then(response => {
                            if (response.data.code === 200) {
                                this.currentUser = null;
                                this.$message.success('退出成功');
                            }
                        })
                        .catch(error => {
                            this.$message.error('退出失败');
                        });
                },
                goToLogin() {
                    window.location.href = '/login.html';
                }
            }
        });
    </script>
</body>
</html> 